<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
            .blog-card-hover {
                @apply hover:shadow-xl transition-all duration-300 border-l-4 border-transparent hover:border-primary;
            }
            .loading-gradient {
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: loading 1.5s infinite;
            }
            @keyframes loading {
                0% {
                    background-position: 200% 0;
                }
                100% {
                    background-position: -200% 0;
                }
            }
            .skeleton-text {
                @apply loading-gradient rounded-full h-4;
            }
        }
    </style>
</head>
<body class="bg-slate-50 font-sans text-slate-800">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50 transition-custom">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <img src="pic/logo2.jpg" alt="博客系统logo" class="h-10 w-10 rounded-full object-cover shadow-md transform hover:scale-105 transition-custom">
            <span class="blog-title text-xl font-bold text-primary text-shadow">我的博客系统</span>
        </div>

        <div class="hidden md:flex items-center space-x-6">
            <a href="blog_list.html" class="nav-span text-primary font-medium flex items-center gap-1.5">
                <i class="fa fa-home"></i> 主页
            </a>
            <a href="blog_edit.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-pencil"></i> 写博客
            </a>
            <a href="#" onclick="logout()" class="nav-span text-slate-600 hover:text-red-500 transition-custom flex items-center gap-1.5">
                <i class="fa fa-sign-out"></i> 注销
            </a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button class="md:hidden text-slate-600 hover:text-primary transition-custom">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>
</nav>

<!-- 主内容区 -->
<div class="container mx-auto px-4 pt-24 pb-16">
    <div class="flex flex-col md:flex-row gap-8">
        <!-- 左侧个人信息卡片 -->
        <div class="left md:w-1/4 lg:w-1/5">
            <div class="card bg-white rounded-xl shadow-md overflow-hidden card-hover sticky top-24">
                <div class="bg-gradient-to-r from-primary/90 to-primary p-6"></div>
                <div class="px-6 pb-6 -mt-12">
                    <img src="pic/doge.jpg" alt="用户头像" class="w-24 h-24 rounded-full border-4 border-white mx-auto shadow-md object-cover transform hover:scale-105 transition-custom">
                    <h3 class="text-center text-xl font-bold mt-4 mb-2 user-name">加载中...</h3>
                    <a href="#" class="github-link flex items-center justify-center gap-1.5 text-primary hover:text-primary/80 transition-custom py-2">
                        <i class="fa fa-git" style="color: #c71d23;"></i> Gitee 地址
                    </a>

                    <div class="grid grid-cols-2 gap-4 mt-6 pt-6 border-t border-slate-100">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-primary blog-count">0</div>
                            <div class="text-slate-500 text-sm mt-1">文章</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-primary category-count">0</div>
                            <div class="text-slate-500 text-sm mt-1">分类</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧博客列表 -->
        <div class="right flex-1">
            <!-- 博客列表标题 -->
            <div class="mb-8 flex justify-between items-center">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-slate-800">
                    <i class="fa fa-book text-primary mr-2"></i>博客文章
                </h2>
                <a href="blog_edit.html" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom flex items-center gap-1.5 shadow-sm">
                    <i class="fa fa-plus"></i> 发布新文章
                </a>
            </div>

            <!-- 博客列表容器 -->
            <div class="space-y-6 blog-list">
                <!-- 加载状态 -->
                <div class="flex justify-center items-center py-12">
                    <div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-primary"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>
    // 页面加载时获取博客列表和用户信息
    $(document).ready(function() {
        getBlogInfo();
        getUserInfo();

        // 添加页面滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 10) {
                nav.classList.add('py-2', 'shadow');
                nav.classList.remove('py-3');
            } else {
                nav.classList.add('py-3');
                nav.classList.remove('py-2', 'shadow');
            }
        });
    });

    // 获取用户信息
    function getUserInfo() {
        // 显示骨架屏加载效果
        showUserInfoLoading();

        const userId = localStorage.getItem("loginUserId");
        if (!userId) {
            console.error("用户ID不存在");
            return;
        }

        $.ajax({
            type: "get",
            url: `/user/getUserInfo?userId=${userId}`,
            success: function(result) {
                if (result && result.code == 200) {
                    updateUserInfo(result.data);
                } else {
                    console.error("获取用户信息失败", result);
                    showUserInfoError();
                }
            },
            error: function(error) {
                console.error("获取用户信息时出错", error);
                showUserInfoError();
            }
        });
    }

    // 显示用户信息加载效果
    function showUserInfoLoading() {
        $('.user-name').html('<div class="skeleton-text"></div>');
        $('.blog-count').html('<div class="skeleton-text max-w-[40px] mx-auto"></div>');
        $('.category-count').html('<div class="skeleton-text max-w-[40px] mx-auto"></div>');
        // GitHub地址加载状态
        $('.github-link').html('<i class="fa fa-github"></i> <div class="skeleton-text inline-block w-24"></div>');
    }

    // 显示用户信息加载错误
    function showUserInfoError() {
        $('.user-name').text('加载失败');
        $('.blog-count').text('-');
        $('.category-count').text('1');
        // 恢复默认GitHub链接文本
        $('.github-link').html('<i class="fa fa-git" style="color: #c71d23;"></i> Gitee 地址');
    }

    // 更新用户信息显示
    function updateUserInfo(user) {
        if (user) {
            // 设置用户名称
            $('.user-name').text(user.userName || '用户名称');

            // 设置文章个数
            $('.blog-count').text(user.blogCount || '0');

            // 设置分类数量
            $('.category-count').text('1');

            // 设置GitHub地址
            const githubLink = user.githubUrl || '#';
            $('.github-link').attr('href', githubLink)
                .attr('target', '_blank') // 新窗口打开
                .html('<i class="fa fa-git" style="color: #c71d23;"></i> Gitee 地址');
        }
    }

    // 获取博客列表
    function getBlogInfo() {
        $.ajax({
            type: "get",
            url: "/blog/getList",
            success: function(result) {
                if (result != null && result.code == 200) {
                    // 按创建时间从新到旧排序
                    // 改进排序逻辑，确保同一天的文章也按时间倒序排列
                    const sortedBlogs = result.data.sort((a, b) => {
                        // 转换为时间戳进行精确比较
                        const timeA = new Date(a.createTime).getTime();
                        const timeB = new Date(b.createTime).getTime();

                        // 降序排列 (新的在前)，时间戳大的排在前面
                        return timeB - timeA;
                    });

                    renderBlogs(sortedBlogs);

                    // 更新用户信息中的文章个数
                    const blogCount = result.data.length || 0;
                    $('.blog-count').text(blogCount);
                } else {
                    renderBlogListError();
                }
            },
            error: function() {
                renderBlogListError();
            }
        });
    }

    // 渲染博客列表
    function renderBlogs(blogs) {
        let finalHtml = "";

        if (blogs.length === 0) {
            finalHtml = `
                <div class="bg-white rounded-xl p-8 text-center shadow-sm">
                    <i class="fa fa-file-text-o text-5xl text-slate-300 mb-4"></i>
                    <h3 class="text-xl text-slate-500">暂无博客文章</h3>
                    <p class="text-slate-400 mt-2">快去发布你的第一篇博客吧！</p>
                    <a href="blog_edit.html" class="inline-block mt-4 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom">
                        <i class="fa fa-pencil mr-1"></i> 发布文章
                    </a>
                </div>
            `;
        } else {
            for (let blog of blogs) {
                // 截断过长的描述
                let desc = blog.content.length > 150
                    ? blog.content.substring(0, 150) + '...'
                    : blog.content;

                finalHtml += `
                    <div class="blog bg-white rounded-xl p-6 shadow-sm blog-card-hover">
                        <div class="title text-xl font-bold text-slate-800 hover:text-primary transition-custom mb-2">
                            ${blog.title}
                        </div>
                        <div class="date text-slate-500 text-sm flex items-center mb-4">
                            <i class="fa fa-calendar-o mr-1"></i>
                            ${blog.createTime}
                        </div>
                        <div class="desc text-slate-600 line-clamp-3 mb-4">
                            ${desc}
                        </div>
                        <a class="detail inline-flex items-center text-primary hover:text-primary/80 font-medium transition-custom group"
                           href="blog_detail.html?blogId=${blog.id}">
                            查看全文
                            <i class="fa fa-angle-right ml-1 transform group-hover:translate-x-1 transition-transform"></i>
                        </a>
                    </div>
                `;
            }
        }

        // 添加淡入动画
        $(".blog-list").html(finalHtml).hide().fadeIn(500);
    }

    // 渲染博客列表错误
    function renderBlogListError() {
        const html = `
            <div class="bg-white rounded-xl p-6 text-center shadow-sm">
                <i class="fa fa-exclamation-triangle text-amber-500 text-2xl mb-2"></i>
                <p class="text-slate-600">加载博客列表失败，请刷新页面重试</p>
                <button class="mt-4 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg transition-custom"
                        onclick="getBlogInfo()">
                    重新加载
                </button>
            </div>
        `;
        $(".blog-list").html(html);
    }
</script>
</body>
</html>
